import React from 'react'
import PropTypes from 'prop-types'
import className from 'classnames'
import {
  Icon,
  Menu,
} from 'semantic-ui-react'

const CommandBotton = ({
  icon,
  action,
  active,
  name,
  children,
}) => {
  const classname = className('item', { open: active })
  const click = active ? undefined : action
  return (
    <Menu.Item className={classname} onClick={()=>{
      click()
    }}>
      {
        icon && <Icon className="icon" size="mini" name={icon} />
      }
      {name}
      {children}
    </Menu.Item>
  )
}

CommandBotton.propTypes = {
  icon: PropTypes.string,
  action: PropTypes.func,
  active: PropTypes.bool,
  name: PropTypes.string,
  children: PropTypes.node,
}

CommandBotton.defaultProps = {
  active: false,
  name: undefined,
  action: undefined,
  children: undefined,
  icon: undefined,
}

export default CommandBotton
